<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="申请退押金"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="userDataList"
            @pullup="loadMore"
        >

            <div class="user-info-box">
                <img
                    class="user-img"
                    :src="currentUserInfo.face"
                />
                <div class="user-name">{{currentUserInfo.nick_name}}&nbsp;&nbsp;&nbsp;&nbsp;ID：{{currentUserInfo.id}}</div>
                <div class="user-deposit">押金：{{currentUserInfo.deposit | currency}}</div>
                <div
                    class="user-info"
                    v-if="currentUserInfo.agent == 1"
                >体验官人数 {{userData.vip.total}} / 10 人</div>
                <div
                    class="user-info"
                    v-if="currentUserInfo.agent == 2"
                >店主人数 {{userData.store.total}} / 10 人</div>
            </div>

            <div class="user-team-list">
                <div
                    class="team-empty-tips"
                    v-if="userDataList.length == 0"
                >{{emptyTips}}</div>
                <div
                    class="team-item"
                    v-for="(item,index) of userDataList"
                    :key="index"
                >
                    <img
                        class="item-img"
                        :src="item.face"
                    />
                    <div class="item-info">
                        <div class="item-name-date">
                            <div class="item-name">{{item.nick_name}}</div>
                            <div class="item-date">{{item.add_time}}</div>
                        </div>
                        <div class="item-id">ID：{{item.id}}</div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="refund-deposit-btn"
            :class="userData.vip.total<10?'no-refund-deposit':''"
            v-html="userData.vip.total<10?'未达标':'立即申请退押金'"
            v-if="currentUserInfo.agent == 1"
            @click="refundShopKeeperDeposit"
        ></div>
        <div
            class="refund-deposit-btn"
            :class="userData.store.total<10?'no-refund-deposit':''"
            v-html="userData.store.total<10?'未达标':'立即申请退押金'"
            v-if="currentUserInfo.agent == 2"
            @click="refundProviderDeposit"
        ></div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'RefundDeposit',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem'
            },
            userInfo: '',
            userData: '',
            userDataList: [],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getUserData()
        this.getUserDataList()
    },
    methods: {
        getUserData() {
            this.axios.post('/api/user/agent/statistics.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.userData = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getUserDataList() {
            let dataType
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            if (this.userInfo.agent == 1) {
                dataType = 'myVip'
            } else {
                dataType = 'myStore'
            }
            this.isLoading = true
            let postData = this.qs.stringify({
                act: dataType,
                page_size: 20,
                page: this.nowPage
            })
            this.axios
                .post('/api/user/agent/users_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无数据'
                        }
                        this.userDataList = this.userDataList.concat(
                            data.data.list
                        )
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 20
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getUserDataList()
            }
        },
        refundShopKeeperDeposit() {
            if (this.userData.vip.total > 9) {
                this.$router.push({
                    path: '/cardSelect',
                    query: { selectType: 'refundDeposit' }
                })
            }
        },
        refundProviderDeposit() {
            if (this.userData.store.total > 9) {
                this.$router.push({
                    path: '/cardSelect',
                    query: { selectType: 'refundDeposit' }
                })
            }
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-info-box
    padding 0.42rem 0
    text-align center
    box-sizing border-box
    background-image url('../../assets/images/userCenter/refund-deposit-bg.jpg')
    background-size 100% 100%
    background-repeat no-repeat
    .user-img
        width 1.55rem
        height 1.55rem
        border-radius 100%
    .user-id, .user-name, .user-deposit
        margin-top 0.27rem
        font-size 0.32rem
        color #fff
    .user-info
        margin-top 0.53rem
        font-size 0.37rem
        color #fff
.user-team-list
    margin-top 0.19rem
    .team-empty-tips
        height 2rem
        line-height 2rem
        text-align center
        font-size 0.33rem
        color #999
    .team-item
        display flex
        align-items center
        height 1.89rem
        padding 0 0.4rem
        background #fff
        border-bottom 1px solid #e5e5e5
        .item-img
            width 1.12rem
            height 1.12rem
            border-radius 100%
        .item-info
            flex 1
            margin-left 0.42rem
            .item-name-date
                display flex
                justify-content space-between
                align-items center
                .item-name
                    font-size 0.37rem
                    color #333
                .item-date
                    font-size 0.32rem
                    color #949494
            .item-id
                margin-top 0.2rem
                font-size 0.32rem
                color #666
.refund-deposit-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.37rem
    color #fff
.no-refund-deposit
    background #999
</style>
